<template>
  <div class="header-container">
    <header class="site-header">
      <Logo />
      <Navigation />
      <Controls />
    </header>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Logo, Navigation, Controls } from '../index';

export default defineComponent({
  name: 'AppHeader',
  components: {
    Logo,
    Navigation,
    Controls,
  },
  props: {
    msg: String,
  },
});
</script>



<style scoped lang="scss">
/*
z-50: z-index: 50;my-0: margin-top: 0;margin-bottom: 0;mx-auto: margin-left: auto;margin-right: auto;
py-4= padding top and bottom: 4;
*/
.header-container {
  .site-header {
    max-width: var(--max-width);
    @apply relative flex z-50 my-0 mx-auto py-4;
  }
}
/* 样式部分 */
</style>
